<!doctype html>
<html class="no-js">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>socket</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <style type="text/css"></style>
    <link rel="stylesheet" href="https://pxlm.oss-cn-qingdao.aliyuncs.com/res/assets/css/admin.css">
    <link rel="stylesheet" href="https://pxlm.oss-cn-qingdao.aliyuncs.com/res/assets/css/amazeui.min.css">
</head>

<body>
    <input type="text" id="A">
    <p class="onSend">发送</p>
    <hr/>

    <div id = "contentsss" class=" = "am-g">
        <#list list.list as item>
            <p>${item.content!''}</p>
            <p>${item.fromUserName!''}</p>
            <p><img src=${item.fromUserLogo!''}></p>
            <p>${item.addTime!''}</p>
            <p></p>
        </#list>
    </div>


    <div id="container" class="am-g">
    </div>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <!-- <script src="reconnecting-websocket.min.js"></script> -->
    <!-- <script src="/socket/reconnecting-websocket.min.js"> -->
    <script src="https://cdn.bootcss.com/reconnecting-websocket/1.0.0/reconnecting-websocket.min.js"></script>
    </script>
    <script type="text/javascript">
    // var ws = new ReconnectingWebSocket('wss://bnu.zhen-yee.com/ws');
    var ws = new ReconnectingWebSocket('ws://192.168.50.141:8989/ws');
    // var ws = new ReconnectingWebSocket('ws://192.168.199.213:8989/ws');
    // var ws = new ReconnectingWebSocket('http://yitai.zhen-yee.com:8006/');
    // ws.open();
    ws.onopen = function() {
        var datas = { "uid": "${ record.userCode!'' }" , "roomCode": "${record.code!'' }"};
        ws.send(JSON.stringify(datas))
        console.log('connectd')
        // $("#title").append('连接成功');
        // $('#title').replaceWith('<p id="title">连接成功</p>');
        $("#container").prepend('<div class="am-u-sm-12"><p>connectd</p></div>');

    }
    ws.onclose = function() {
        console.log('dis')
        // $('#title').replaceWith('<p id="title">已断开</p>');
        $("#container").prepend('<div class="am-u-sm-12"><p>已断开</p></div>');
    }
    ws.onmessage = function(data) {

        console.log(data);
        var obj = JSON.parse(data.data);
        console.log(obj);
        // var obj = ; 
        // var obj1 = JSON.parse(data); 
        // alert(obj.content);
        // console.log(data.data)
        // var json = jQuery.parseJSON(data.data);
        // var img = '<img style="width:30px;height:30px;" src="' + json.logo + '"/>'
        $("#container").append('<div class="am-u-sm-12"><p>' + obj.time + '</p></div>');
        $("#container").append('<div class="am-u-sm-12"><p>' + '<img src ='+ obj.logo + '></p></div>');
        $("#container").append('<div class="am-u-sm-12"><p>' + obj.name + '</p></div>');
        $("#container").append('<div class="am-u-sm-12"><p>' + obj.content + '</p></div>');
        // ws.send('recv')
    }
    $('.onSend').on('click', function() {
        var a = document.getElementById("A").value;
        var datas = { "roomCode": "${record.code!'' }", "content": a, "userCode": "${ record.userCode!'' }" };
        ws.send(JSON.stringify(datas))
    });
    </script>
</body>

</html>